<template>
    <div>
      <h1>User List</h1>
      <button @click="addUser">Add User</button>
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.name }} - {{ user.age }}
          <button @click="deleteUser(user.id)">Delete</button>
        </li>
      </ul>
    </div>
</template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        users: []
      };
    },
    mounted() {
      this.fetchUsers();
    },
    methods: {
      fetchUsers() {
        axios.get('http://192.168.127.129:8088/api/users')
          .then(response => {
            this.users = response.data;
          })
          .catch(error => {
            console.error('Error fetching users:', error);
          });
      },
      addUser() {
        const newUser = {
          name: '张三',
          age: 20
        };
        axios.post('http://192.168.127.129:8088/api/users', newUser)
          .then(() => {
            this.fetchUsers();
          })
          .catch(error => {
            console.error('Error adding user:', error);
          });
      },
      deleteUser(id) {
        axios.delete(`http://192.168.127.129:8088/api/users/${id}`)
          .then(() => {
            this.fetchUsers();
          })
          .catch(error => {
            console.error('Error deleting user:', error);
          });
      }
    }
  };
  </script>    